<template>
  <div class="picking zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">采购订单号</p>
            <div class="ipt">
              <Input
                type="text"
                clearable
                v-model="searchParams.purchaseOrderCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">资产编号</p>
            <div class="ipt">
              <Input
                type="text"
                clearable
                v-model="searchParams.assetCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">设备名称</p>
            <div class="ipt">
              <Input
                type="text"
                clearable
                v-model="searchParams.deviceName"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">到货状态</p>
            <div class="ipt">
              <Select
                v-model="searchParams.state"
                filterable
                clearable
                :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                  v-for="(item, index) of arrivalStatusEnum"
                  :value="item.name"
                  :key="index"
                  :label="item.name"
                ></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">供应商</p>
            <div class="ipt">
              <Input
                clearable
                type="text"
                v-model="searchParams.supplier"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">采购员</p>
            <div class="ipt">
              <Input
                clearable
                type="text"
                v-model="searchParams.purchaser"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">下单日期</p>
            <div class="ipt">
              <DatePicker
                type="daterange"
                placement="bottom-end"
                :value="searchParams.orderDate"
                :placeholder="`${$t('common.selectInfo')}`"
                clearable
                @on-change="handleChangeDate"
              ></DatePicker>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button type="primary" class="search-btn" @click="changeNum()">
                {{ $t('common.Query')
                }}
              </Button>
              <Button class="reset-btn" @click="reset()">{{ $t('common.reset') }}</Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
      </div>

      <div class="tableContent">
        <Table
          class="resizable-table"
          ellipsis
          ref="selection"
          border
          stripe
          :columns="orderAdjustmentDeviceInfoList"
          :data="dataSource"
          @on-selection-change="handleSelectionChange"
          @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'orderAdjustmentDeviceInfo')}"
        >
          <template slot-scope="{ row }" slot="action">
            <!-- <span class="operationBtn" @click="lockClick(row)">
              <i class="iconfont zy-common-chakan"></i>
              {{ $t('common.Check') }}
            </span>-->
            <span
              class="operationBtn"
              @click="goodsClick(row)"
              v-if="(row.orderGoodsQuantity - row.arrivalNum) > 0"
            >
              <i class="iconfont zy-common-gongdandating"></i>
              {{ $t('preliminary.ArrivalDate') }}
            </span>
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="ids.length" />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="$variable.pageSizes"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div>
    </div>
    <!--到货日期-->
    <goods-purchase-modal ref="goodsPurchaseModal" @refresh="handleRefresh" />
  </div>
</template>

<script>
import toggleTableOperation from "@/mixins/toggleTableOperation";
import GoodsPurchaseModal from "./modules/goodsPurchaseModal";

export default {
  name: "picking",
  mixins: [toggleTableOperation],
  components: {
    GoodsPurchaseModal
  },
  data() {
    return {
      ids: [],

      dhzt: 0,

      arrivalStatusEnum: [
        { id: "待收货", name: "待收货" },
        { id: "收货中", name: "收货中" },
        // { id: '已到货', name: '已到货' },
        { id: "已完成", name: "已完成" }
      ],
      companyListEnum: [],
      purchaseList: {},
      textInfo: "新增",

      searchParams: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30],
      statusList: [
        { id: 0, name: this.$t("preliminary.ToBeArrived") },
        { id: 1, name: this.$t("preliminary.InArrival") },
        { id: 2, name: this.$t("preliminary.Arrived") }
      ],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "到货状态",
          align: "center",
          resizable: true,
          tooltip: true,
          key: "state",
          width: 130
        },
        {
          title: "资产编号",
          key: "assetCode",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 150
        },
        {
          title: "采购订单项目",
          key: "purchaseOrderProject",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 135
        },
        {
          title: "采购订单号",
          key: "purchaseOrderCode",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 200
        },
        {
          title: "下单日期",
          key: "orderDate",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 135
        },
        {
          title: "所属公司",
          key: "company",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 150
        },
        {
          title: "供应商",
          key: "supplier",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 240
          // tooltip: true,
        },
        {
          title: "供应商名称",
          key: "supplierName",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 200
          // tooltip: true,
        },
        {
          title: "设备名称",
          key: "deviceName",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 200
          // ellipsis: true
        },
        {
          title: "规格型号",
          key: "specModel",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 200
          // ellipsis: true
        },
        {
          title: "订货数量",
          key: "orderGoodsQuantity",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 200
        },
        {
          title: "待到货数量",
          key: "numble",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 180,
          render: (h, params) => {
            return h(
              "div",
              params.row.orderGoodsQuantity - params.row.arrivalNum
            );
          }
        },
        {
          title: "已到货数量",
          key: "arrivalNum",
          align: "center",
          resizable: true,
          tooltip: true,
          minWidth: 180
        },
        {
          title: "采购员",
          key: "purchaser",
          align: "center",
          resizable: true,
          tooltip: true,
          resizable: true,
          tooltip: true,
          minWidth: 120
        },
        {
          title: "操作",
          slot: "action",
          minWidth: 180,
          align: "center",
          resizable: true,
          tooltip: true,
          fixed: "right"
        }
      ],
      dataSource: [],
      dateTimeRange: [],
      editStatus: false,
      OAList: []
    };
  },
  created() {
    this.getCompany();
    this.searchList();
  },
  mounted() {
    this.getTableColumnsWidth(this.columns, "orderAdjustmentDeviceInfo");
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "detailPurchaseModal") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  methods: {
    getCompany() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser"
      }).then(res => {
        if (res.code === 200) {
          this.companyListEnum = res.data.map(val => ({
            id: val.code,
            name: val.name
          }));
        }
      });
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    handlefhBeforeUpload() {},
    changeMenge() {
      this.purchaseList.wdhzs = this.purchaseList.menge;
    },
    //日期
    handleChangeDate(val) {
      this.searchParams.beginDate = val[0];
      this.searchParams.endDate = val[1];
      // this.searchParams.cdate = val ? this.$moment(val).format('YYYY-MM-DD') : ''
    },
    //查看
    lockClick(record) {
      this.$router.push({
        path: "/devBasic/earlierStage/detailPurchaseModal",
        query: {
          // requestNo: record.banfn,
          // requestProject: record.bnfpo,
          // orderNo: record.ebeln,
          // orderProject: record.ebelp,
          // werksName: record.werksName,
          id: record.id
        }
      });
    },
    //到货日期
    goodsClick(record) {
      this.$refs.goodsPurchaseModal.show(record);
    },
    //刷新
    handleRefresh() {
      this.searchList();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      //查询列表
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key] || key == "dhzt") {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      this.axios({
        method: "post",
        url: "/dms/devicePurchase/page",
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.dataSource = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    handleSelectionChange(selectionData) {
      console.log(selectionData);
      let arr = [];
      selectionData.forEach(item => {
        arr.push(item.id);
      });
      this.ids = arr;
    },
    getOAList(query) {
      if (typeof query === "string" && query.indexOf("----") > 0) {
        return;
      }
      if (query !== "") {
        this.axios({
          method: "get",
          url: "/basic/user/searchOAUser",
          params: {
            key: query
          }
        }).then(res => {
          if (res.code === 200) {
            this.OAList = res.data.map(item => {
              return {
                ...item,
                showName: item.empno + "----" + item.username
              };
            });
          } else {
            this.OAList = [];
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true
            });
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .ivu-upload-drag {
  text-align: left;
}

.file-list {
  padding-left: 20px;
}

.picking {
  .formList {
    padding: 30px;

    .btn {
      margin-top: 20px;
      text-align: center;
      width: 100%;
      height: 40px;
    }

    .inputBorder {
      border: 1px solid #dcdee2;
      border-radius: 4px;
    }
  }
}

.ivu-input-number {
  width: -webkit-fill-available;
}

.purchaseFormitem {
  padding: 0 16px 0 0;

  &:nth-child(3n + 3) {
    padding-right: 0;
  }

  .ivu-form-item {
    margin-bottom: 16px;
  }

  &:nth-child(n + 13) {
    .ivu-form-item {
      margin-bottom: 0;
    }
  }

  ::v-deep .ivu-input-word-count {
    padding-left: 0 !important;
  }

  ::v-deep .ivu-input {
    padding-right: 50px;
  }
}

::v-deep .ivu-upload-drag:hover {
  border: none;
}

::v-deep .ivu-upload-drag {
  border: none;
}
</style>


